<template>
	<div class="user" @click="logout">
		<span>{{ user.judgeName }}</span>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapState } from 'vuex';

export default Vue.extend({
	computed: {
		...mapState({
			user: (state: any) => state.user
		})
	},
	methods: {
		logout() {
			this.$createDialog({
				type: 'confirm',
				content: '确定是否退出登录',
				confirmBtn: {
					text: '确定'
				},
				cancelBtn: {
					text: '取消'
				},
				onConfirm: () => {
					console.log('确定');
					this.$store.commit('logout');
					this.$router.replace('/');
				},
				onCancel: () => {
					console.log('取消');
				}
			}).show();
		}
	}
});
</script>

<style lang="less" scoped>
.user {
	padding: 10px 20px 10px 0;
	span {
		color: #fff;
		font-size: 26px;
	}
}
</style>
